<template>
  <div>
    <h1>Shippingaddress</h1>
    <!--搜索框-->
    <el-form :inline="true" ref="form" :model="queryLike" label-width="80px">
      <el-form-item label="收货地址">
        <el-input v-model="queryLike.name" placeholder="输入要查找的地址"></el-input>
      </el-form-item>
      <el-form-item label="所有者id">
        <el-input v-model="queryLike.belong" placeholder="输入要查找的id"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="queryLike.state">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">封禁</el-radio>
        </el-radio-group>
      </el-form-item>
      <br>
      <el-form-item label="创建时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择开始日期" v-model="queryLike.startTime1"
                          style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" style="text-align:center">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="选择开始时间" v-model="queryLike.startTime2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择结束日期" v-model="queryLike.endTime1"
                          style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" style="text-align:center">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="选择结束时间" v-model="queryLike.endTime2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <br>
      <el-form-item label="收货人名">
        <el-input v-model="queryLike.cname" placeholder="输入要查找的名字"></el-input>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="queryLike.address" placeholder="输入要查找的内容"></el-input>
      </el-form-item>
      <el-form-item label="称呼">
        <el-input v-model="queryLike.sex" placeholder="输入要查找的称呼"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="queryLike.telephone" placeholder="输入号码"></el-input>
      </el-form-item>
      <br>
      <el-form-item label="排序类型">
        <el-radio-group v-model="queryLike.sortType">
          <el-radio :label="1">降序</el-radio>
          <el-radio :label="0">升序</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序依据">
        <el-radio-group v-model="queryLike.sortBy">
          <el-radio :label="10">创建时间</el-radio>
        </el-radio-group>
      </el-form-item>
      <br>
      <el-form-item label="页数">
        <el-input v-model="queryLike.page" width="20" placeholder="输入当前页"></el-input>
      </el-form-item>
      <el-form-item label="页内条数">
        <el-input v-model="queryLike.pageSize" width="20" placeholder="输入单页总条数"></el-input>
      </el-form-item>
      <el-form-item>
        <!--查询按钮-->
        <el-button type="primary" @click="search(queryLike)" icon="el-icon-search" value="查询"></el-button>
        <!--添加按钮-->
        <el-button style="float:right" type="success" icon="el-icon-circle-plus-outline" @click="insert()"
                   value="添加"></el-button>
      </el-form-item>
    </el-form>
    <!--添加填出的对话框(和修改是同一个)-->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="pojo">
        <el-form-item label="收货地址名" :label-width="formLabelWidth">
          <el-input v-model="pojo.name" autocomplete="on"></el-input>
        </el-form-item>
          <el-form-item label="所有者id" :label-width="formLabelWidth">
              <el-input v-model="pojo.belong" autocomplete="on"></el-input>
          </el-form-item>
        <el-form-item label="收货员名" :label-width="formLabelWidth">
          <el-input v-model="pojo.cname" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="pojo.address" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="称呼" :label-width="formLabelWidth">
          <el-input v-model="pojo.sex" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="pojo.telephone" autocomplete="on"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save(pojo)">确 定</el-button>
      </div>
    </el-dialog>
    <!--列表-->
    <el-table :data="user" style="width: 100%" max-height="600">
      <el-table-column fixed property="sid" label="主键"></el-table-column>
      <el-table-column property="" label="所有者">
        <template slot-scope="scope">
          <div v-if="scope.row.belongC!==''&&scope.row.belongC!==null&&scope.row.belongC!==undefined">
            {{scope.row.belongC.name}}
          </div>
          <div v-if="scope.row.belongM!==''&&scope.row.belongM!==null&&scope.row.belongM!==undefined">
            {{scope.row.belongM.name}}
          </div>
        </template>
      </el-table-column>
      <el-table-column property="" label="所有者类型">
        <template slot-scope="scope">
          <div v-if="scope.row.belongC!==''&&scope.row.belongC!==null&&scope.row.belongC!==undefined">顾客</div>
          <div v-if="scope.row.belongM!==''&&scope.row.belongM!==null&&scope.row.belongM!==undefined">商家</div>
        </template>
      </el-table-column>
      <el-table-column property="name" label="收货地址名"></el-table-column>
      <el-table-column property="cname" label="收货员名"></el-table-column>
      <el-table-column property="address" label="详细地址"></el-table-column>
      <el-table-column property="sex" label="性别"></el-table-column>
      <el-table-column property="telephone" label="电话"></el-table-column>
      <el-table-column property="state" label="状态码"></el-table-column>
      <el-table-column property="creattime" label="创建时间" width="150"></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-setting" value="修改" @click="change(scope.row)" circle></el-button>
          <el-button v-if="scope.row.state===1" type="info" icon="el-icon-video-pause" value="封禁"
                     @click="dele(scope.row)" circle></el-button>
          <el-button v-if="scope.row.state!==1" type="info" icon="el-icon-video-play" value="启用"
                     @click="enable(scope.row)" circle></el-button>
          <el-button v-if="power===3" type="danger" icon="el-icon-delete" value="删除" @click="phydele(scope.row)"
                     circle></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Shippingaddress",
  props: {},
  data() {
    return {
      /***
       * @修改和添加数据类型
       * */
      pojo: this.$store.state.Pojo.Shippingaddress,
      /**
       * @弹出的对话框,用于修改和添加数据
       * */
      dialogFormVisible: false,
      /**
       * @对话框内条目的统一长度
       * */
      formLabelWidth: '120px',
      /**
       * @表单数据
       * */
      user: this.$store.state.List.Shippingaddress,
      /**
       * @权限,页面显示不同权限的操作
       * */
      power: this.$store.state.operator.power,
      /**
       * @查询条件
       * */
      queryLike: {
        OperatorId: "",
        endTime1: "2099-01-01 00:00:00.000+0000",
        endTime2: "2099-01-01 00:00:00.000+0000",
        belong: "",
        name: "",
        cname: "",
        address: "",
        sex: "",
        telephone: "",
        page: 1,
        pageSize: 10,
        sortBy: 10,
        sortType: 1,
        startTime1: "2000-01-01 00:00:00.000+0000",
        startTime2: "2000-01-01 00:00:00.000+0000",
        state: 1,
      },
      /**
       * @后端controller名字
       * */
      controller: 'Shippingaddress',
    };
  },
  computed: {
    baseURL() {
      return this.$store.state.baseURL;
    }
  },
  /**
   * @加载数据
   */
  created() {
    this.LoadMsg();
  },
  /**
   * @static方法
   * */
  mounted() {
    (() => {
      /*console.log(this.$store.state.operator)
      this.power=this.$store.state.operator["power"];
      console.log(this.power);
      console.log(typeof (this.power))*/
    })();
  },
  methods: {
    /**
     * @添加
     * */
    insert() {
      this.pojo = {
        sid: "",
        creattime: "",
        name: "",
        cname: "",
        address: "",
        sex: "",
        telephone: "",
        belong: "",
        state: 1,
      }
      this.dialogFormVisible = true;
    },
    /**
     * @修改
     * */
    change(val) {
      //console.log(val)
      let temp = this.$helper.clone(val);
      if (val.belongC !== '' && val.belongC !== null && val.belongC !== undefined) {
        temp.belong = val.belongC.cid;
      } else {
        temp.belong = val.belongM.mid;
      }
      //console.log(temp)
      this.pojo = temp;
      this.dialogFormVisible = true;
    },
    /**
     * @保存
     */
    save(val) {
      //console.log(val)
      let _this = this;
      this.axios.post(this.$store.state.baseURL + 'client/' + this.controller + '/save?' + 'OperatorId=' + this.$store.state.operator.id,
        {
          sid: val.sid,
          creattime: "",
          name: val.name,
          cname: val.cname,
          address: val.address,
          sex: val.sex,
          telephone: val.telephone,
          belong: val.belong,
          state: val.state,
        })
        .then(res => {
          //console.log(res.data)
          _this.search(_this.queryLike);
        })
      this.dialogFormVisible = false;
    },
    /**
     * @启用
     */
    enable(val) {
      let _this = this;
      this.axios.delete(this.$store.state.baseURL + 'client/' + this.controller + '/enable?' + 'OperatorId=' + this.$store.state.operator.id + '&id=' + val.sid)
        .then(res => {
          _this.search(_this.queryLike);
        })
    },
    /**
     * @物理删除
     */
    phydele(val) {
      let _this = this;
      this.axios.delete(this.$store.state.baseURL + 'client/' + this.controller + '/delete/phy?' + 'OperatorId=' + this.$store.state.operator.id + '&id=' + val.sid)
        .then(res => {
          _this.search(_this.queryLike);
        })
    },
    /**
     * @封禁
     */
    dele(val) {
      let _this = this;
      this.axios.delete(this.$store.state.baseURL + 'client/' + this.controller + '/delete?' + 'OperatorId=' + this.$store.state.operator.id + '&id=' + val.sid)
        .then(res => {
          _this.search(_this.queryLike);
        })
    },
    /**
     * @查询
     * */
    search(val) {
      let _this = this;
      //console.log(val);
      this.axios.get(this.$store.state.baseURL + 'client/' + this.controller + '/queryLike?'
        + 'OperatorId=' + this.$store.state.operator.id
        + '&name=' + val.name
        + '&cname=' + val.cname
        + '&belong=' + val.belong
        + '&address=' + val.address
        + '&sex=' + val.sex
        + '&telephone=' + val.telephone
        + '&sortBy=' + val.sortBy
        + '&sortType=' + val.sortType
        + '&page=' + val.page
        + '&pageSize=' + val.pageSize
        + '&state=' + val.state
        + '&startTime=' + this.$helper.renderTime(val.startTime1).split(' ')[0] + ' ' + this.$helper.renderTime(val.startTime2).split(' ')[1]
        + '&endTime=' + this.$helper.renderTime(val.endTime1).split(' ')[0] + ' ' + this.$helper.renderTime(val.endTime2).split(' ')[1]
      )
        .then(res => {
          _this.$store.state.List.Shippingaddress = res.data;
          _this.LoadInfo(res.data);
          //console.log(_this.user);
        })
    }
    ,
    /**
     *
     * @导入具体列表的数据
     */
    LoadMsg() {
      let _this = this;
      this.axios.get(this.$store.state.baseURL + 'client/' + this.controller + '/queryLike?' + 'OperatorId=' + this.$store.state.operator.id + '&state=' + 1)
        .then(res => {
          _this.$store.state.List.Shippingaddress = res.data;
          _this.LoadInfo(res.data);
        })
    }
    ,
    /**
     *
     * @更新当前页面的数据(data<->this.$store.state)
     */
    LoadInfo(val) {
      this.user = val;
    }
    ,
  },
}
</script>

<style scoped>

</style>
